<template>
  <!-- 简介、目录、评论  因为写成子路由导致刷新后头部内容数据 消失
        所以写成一个组件吧        
 -->
  <div class="BookCatalogue">
    <van-tabs
      v-model="activeName"
      background="#fbfbfb"
      :sticky="true"
      title-inactive-color="#ccc"
      title-active-color="#29364b"
      color="#29364b"
      border
    >
      <van-tab class="CataloguePart" title="简介" name="简介">
        <intro-content :ItemContent="ItemContent"></intro-content>
      </van-tab>

      <van-tab title="目录" name="目录">
        <catalog-content :ItemContent="ItemContent"></catalog-content>
      </van-tab>

      <van-tab
        class="comment_count"
        title="评论"
        name="评论"
        :badge="ItemContent.comment_count"
      >
        <comment-count-page :ItemContent="ItemContent"></comment-count-page>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import CatalogContent from "./CatalogContent.vue";
import CommentCountPage from "./CommentCountPage.vue";
import IntroContent from "./IntroContent.vue";
export default {
  name: "BookCatalogue",
  props: ["ItemContent"],
  components: {
    IntroContent,
    CatalogContent,
    CommentCountPage,
  },
  data() {
    return {
      activeName: "简介",
    };
  },
};
</script>

<style lang="scss" scope>
.BookCatalogue {
  // 作者部分
  .CataloguePart {
    padding: 0 0.875rem;
  }
  .van-tab {
    .van-tab__text-wrapper {
      .van-info {
        color: var(--fontcolor);
        background-color: transparent;
      }
    }
  }
}
</style>